<template>
  <div>{{ count }}</div>
  <div>obj数据： {{ obj.name }}, {{ obj.time }}</div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';

const count = ref(10);
const obj = reactive({ name: '要吃饭了', time: 12 });

// z最后总结： watch 和 computed区别？
// watch 组件刚创建的时候，不会执行。 有个属性可以让他组件一创建就立即执行 immediate
watch(
  count,
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  { immediate: true }
);

watch(obj, (newVal, oldVal) => {
  console.log(newVal, oldVal);
});

setTimeout(() => {
  count.value = 2000;
  obj.time++;
}, 3000);

setTimeout(() => {
  obj.name = '不要着急';
}, 4000);
</script>
